'use client'

import { useState } from 'react'
import CodeMirror from '@uiw/react-codemirror'
import { sql } from '@codemirror/lang-sql'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

interface SqlEditorProps {
  onExecute: (query: string) => void;
  defaultValue?: string;
}

export function SqlEditor({ onExecute, defaultValue = '' }: SqlEditorProps) {
  const [query, setQuery] = useState(defaultValue)

  return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>SQL编辑器</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="mb-4">
          <CodeMirror
            value={query}
            height="150px"
            extensions={[sql()]}
            onChange={(value) => setQuery(value)}
            className="border rounded-md"
          />
        </div>
        <Button
          onClick={() => onExecute(query)}
          className="w-full"
        >
          执行查询
        </Button>
      </CardContent>
    </Card>
  )
}
